<template>
  <div class="login_form">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="0px"
      status-icon
    >
      <el-tabs v-model="active">
        <el-tab-pane label="账号登录" :name="0">
          <div v-if="active === 0" class="mt-lg">
            <el-form-item prop="mobile">
              <el-input
                :prefix-icon="Iphone"
                placeholder="请输入手机号"
                size="large"
                v-model="ruleForm.mobile"
              />
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                :prefix-icon="Lock"
                placeholder="请输入密码"
                size="large"
                type="password"
                show-password
                v-model="ruleForm.password"
              />
            </el-form-item>
          </div>
        </el-tab-pane>
        <el-tab-pane label="验证码登录" :name="1">
          <div v-if="active === 1" class="mt-lg">
            <el-form-item prop="mobile">
              <el-input
                :prefix-icon="Iphone"
                placeholder="请输入手机号"
                size="large"
                v-model="ruleForm.mobile"
              />
            </el-form-item>
            <el-form-item prop="code">
              <div class="flex wh">
                <el-input
                  class="mr-lg"
                  :prefix-icon="Key"
                  placeholder="请输入验证码"
                  size="large"
                  v-model="ruleForm.code"
                />
                <el-button
                  v-if="count <= 0"
                  size="large"
                  class="flex-1"
                  type="primary"
                  :loading="countLoading"
                  @click="() => setCountDown(60, ruleForm.mobile)"
                  >获取验证码</el-button
                >
                <el-button
                  v-else
                  size="large"
                  class="flex-1"
                  type="primary"
                  disabled
                  >{{ count }}s后重新获取</el-button
                >
              </div>
            </el-form-item>
          </div>
        </el-tab-pane>
      </el-tabs>
      <el-form-item>
        <el-button
          :loading="loading"
          size="large"
          class="wh"
          type="primary"
          @click="handleLogin"
          >登 录</el-button
        >
      </el-form-item>
      <el-form-item>
        <div class="flex-y-center wh">
          <div class="flex-1">
            <el-checkbox
              v-show="active === 0"
              v-model="ruleForm.remember"
              label="记住密码"
              size="large"
            />
          </div>
          <div
            class="flex-x-end c-blue f-s-14 pointer"
            @click="handleForgotPassword"
          >
            忘记密码
          </div>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import { ref, getCurrentInstance, onMounted } from "vue";
import { useRouter } from "vue-router";
import { Iphone, Lock, Key } from "@element-plus/icons-vue";
import { useLoginHook } from "@/hooks/useSendVerificationCode.js";
import { getCookies, setCookies, setLocalStorage,clearLoginInfo } from "@/utils/cache.js";
const { count, countLoading, setCountDown } = useLoginHook();
const { proxy } = getCurrentInstance();
const active = ref(0);
const ruleForm = ref({});
const router = useRouter();
const ruleFormRef = ref();
const loading = ref(false);
onMounted(() => {
  const account = getCookies("ACCOUNT_INFO");
  if (account) {
    ruleForm.value = JSON.parse(atob(account));
    if (ruleForm.value.code) {
      ruleForm.value.code = "";
    }
  }
});
const handleForgotPassword = () => {
  router.push("/ForgetPassword");
};
const handleLogin = () => {
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      const params = {
        url: {
          0: "/seller/login",
          1: "/seller/code",
        }[active.value],
        data: ruleForm.value,
      };
      loading.value = true;
      proxy.$post(params).then(
        (res) => {
          if (active.value === 0) {
            // 记住密码
            if (ruleForm.value.remember) {
              setCookies("ACCOUNT_INFO", btoa(JSON.stringify(ruleForm.value)));
            } else {
              setCookies("ACCOUNT_INFO", btoa("{}"));
            }
          }
          setCookies("TOKEN", res.jwt);
          setLocalStorage("USER_INFO", res.user);
          loading.value = false;
          router.push("/");
        },
        () => {
          clearLoginInfo()
          loading.value = false;
        }
      );
    }
  });
};
const rules = ref({
  mobile: [
    {
      required: true,
      message: "请输入手机号",
      trigger: "blur",
    },
  ],
  code: [
    {
      required: true,
      message: "请输入验证码",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur",
    },
  ],
});
</script>

<style lang="less" scoped>
:deep(.el-tabs__nav) {
  width: 100% !important;
  justify-content: space-around;
}
.login_form {
  margin: 80px 70px 0 70px;
}
</style>